import React,{Component} from 'react';
import {
   View,
   Text,
   TouchableOpacity,
   StyleSheet,
   Image,
   SectionList
} from 'react-native';

const headerRightIcon=(
    <View style={{flexDirection:'row',alignItems:'center'}}>
    <Image
    style={{width:20,height:20}}></Image>
    <Text style={{fontSize:18,color:'#292c33'}}>    </Text>
    </View>
  );

export default class ChangeGroupScreen extends Component{

    constructor(props){
        super(props);
        this.state={
           sections: [
                {key:"1",data:[{projectName:"项目一",groupName:"班组A",isDefault:false},
                {projectName:"项目二",groupName:"班组B",isDefault:false},
                {projectName:"项目三",groupName:"班组C",isDefault:true},
                {projectName:"项目四",groupName:"班组D",isDefault:false}]}
            ]
        }
    }

    static navigationOptions=({navigation,screenProps})=>({
        headerLeft:(
            <TouchableOpacity onPress={()=>navigation.state.params.pressBack()}>
            <View style={{flexDirection:'row',alignItems:'center'}}>
            <Image source={require('../../image/icon_message_back.png')} 
            style={{width:20,height:20}}></Image>
            <Text style={{fontSize:18,color:'#292c33'}}>返回</Text>
            </View>
            </TouchableOpacity>
          ),
          headerRight:headerRightIcon,
          headerTitle:'切换班组'
    });

    goToBack(){
        // alert('点击下一步');
        this.props.navigation.goBack(); 
    }

    componentDidMount(){
        this.props.navigation.setParams({
            pressBack:()=>this.goToBack()
        });
    }


    _renderHeader=()=>{
       return  <View style={{backgroundColor:'#ffffff'}}>
           <Text style={{fontSize:12,color:'#8d9199',textAlign:'center',marginLeft:15,marginRight:15,
           marginTop:12,marginBottom:12}}>选择需要参加考勤打卡的班组工人，在所有企业班组中只能参加1个企业班组打卡</Text>
           <View style={styles.line}></View>
        </View> 
    }

    _setDefault=(index)=>{
         var sourceData=[...this.state.sections];
         sourceData[0].data[index].isDefault=true;
         sourceData[0].data.map((item,index1,datas)=>{
                if(index1!==index){
                    sourceData[0].data[index1].isDefault=false;
                }
         });
         this.setState({
             sections:sourceData
         });
         var item=this.state.sections[0].data[index];
         this.props.navigation.state.params.callBack(item);
         this.goToBack();
    }
 
    _extraUniqueKey(item,index){
        return 'index'+index+item;
    }

    _rightButton(info){
        var dataItem=info.item;
        var index=info.index;
       if(dataItem.isDefault){
           return   <Text style={{alignSelf:'center',paddingLeft:4,paddingRight:4,paddingTop:2,
           paddingBottom:1,fontSize:16,color:'#ff7733'}}>当前默认班组</Text>
       }else{
           return  <TouchableOpacity style={{alignSelf:'center'}} onPress={()=>this._setDefault(index)}>
           <Text style={{alignSelf:'center',borderColor:'#c4c6cc',borderWidth:1,borderRadius:4,
           paddingLeft:4,paddingRight:4,paddingTop:2,paddingBottom:1,fontSize:16,color:'#5c5f66'}}>设为默认</Text>
           </TouchableOpacity>
       }
    }

    _renderItem=(info)=>{
        var dataItem=info.item;

        return  <View style={{backgroundColor:'#ffffff'}}>
            <View style={{flexDirection:'row',height:72,marginLeft:15,marginRight:15}}>
               <Image style={styles.header} source={require('../../image/icon_chat_photo.png')}></Image>
               <View style={{position:'relative',flex:1}}>
                  <View style={{flexDirection:'row',alignItems:'center',marginTop:12}}>
                  <Text style={[styles.text,{marginLeft:8,marginTop:4}]}>{dataItem.groupName}</Text> 
                  <Image style={{marginLeft:8}} source={require('../../image/widget/icon_xiangmu.png')}></Image> 
                  </View>
                  <Text style={[styles.subText,{position:'absolute',left:8,bottom:16}]}>{dataItem.projectName}</Text> 
               </View>
               {this._rightButton(info)}
            </View>
            <View style={{backgroundColor:'#e1e2e6',height:1,marginLeft:65}}></View> 
            </View>
    }
    

    render(){
    
        return(
            <View style={{backgroundColor:'#ffffff',flex:1}}>
            <SectionList
              ListHeaderComponent={this._renderHeader}
              sections={this.state.sections}
              renderItem={this._renderItem}
              keyExtractor={this._extraUniqueKey}
            />
            </View>
        );
    }

   
}

const styles=StyleSheet.create({
  text: {
    color: '#000000',
    fontSize: 16,
    fontWeight: 'bold'
  },
  header:{
    width:48,
    height:48,
    alignSelf:'center',
  },
  subText:{
    color: '#8d9199',
    fontSize: 14,
    fontWeight: 'bold'
  },
  line:{
      backgroundColor:'#e1e2e6',
      height:1
  }
  });